<script setup>
const name = "hello vue";
const activeIndex = "1";
const add = () => {
  //
};
const goToRegister = () => {
  console.log("跳转到注册页面");
};

const goToProfile = () => {
  console.log("跳转到个人资料页面");
};
const isLoggedIn = false;
const username = "admin";
const carouselImages = [
  "/images/carousel1.png",
  "/images/carousel2.png",
  "/images/carousel3.png",
];
const hotArticles = [];
// const hotArticles= [
//     { title: 'Vue 3新特性深度解析', date: '2024-11-01' },
//     { title: 'JavaScript 高级编程技巧', date: '2024-10-25' },
//     { title: 'React性能优化秘籍', date: '2024-10-20' },
//     { title: 'Node.js实战应用案例', date: '2024-10-15' }
// ];
const hotCourses = [
  { title: "Vue实战项目开发", price: 99 },
  { title: "全栈开发入门教程", price: 199 },
  { title: "数据结构与算法精讲", price: 149 },
  { title: "人工智能基础课程", price: 249 },
];
const hotProducts = [
  { image: "/images/product01.png", name: "商品1" },
  { image: "/images/product02.png", name: "商品2" },
  { image: "/images/product03.png", name: "商品3" },
  { image: "/images/product04.png", name: "商品4" },
];
const showAllArticles = false;
const showAllCourses = false;
const showAllProducts = false;
</script>

<template>
  <el-container>
    <el-main>
      <el-carousel height="420px" motion-blur>
        <el-carousel-item
          ><img src="/images/carousel1.png" style="width: 100%"
        /></el-carousel-item>
        <el-carousel-item
          ><img src="/images/carousel2.png" style="width: 100%"
        /></el-carousel-item>
        <el-carousel-item
          ><img src="/images/carousel3.png" style="width: 100%"
        /></el-carousel-item>
      </el-carousel>
      <el-row>
        <el-col :span="8" class="hidden-xs-only">
          <div class="section">
            <h3>热门文章</h3>
            <el-link
              type="info"
              style="float: right"
              @click="showAllArticles = true"
              >查看更多</el-link
            >
            <el-skeleton :rows="3" animated:loading="articlelist.length">
              <ul>
                <li
                  v-for="(article, index) in showAllArticles
                    ? hotArticles
                    : hotArticles.slice(0, 3)"
                  :key="index"
                >
                  <p>{{ article.title }}</p>
                  <p style="color: green; margin-left: 10px">
                    {{ article.date }}
                  </p>
                </li>
              </ul>
            </el-skeleton>
            <el-button
              v-if="showAllArticles"
              type="text"
              @click="showAllArticles = false"
              >关闭</el-button
            >
          </div>
        </el-col>

        <el-col :span="8" class="hidden-xs-only">
          <div class="section">
            <h3>热门课程</h3>
            <el-link
              type="info"
              style="float: right"
              @click="showAllCourses = true"
              >查看更多</el-link
            >
            <el-skeleton :rows="3" animated:loading="articlelist.length">
              <ul>
                <li
                  v-for="(article, index) in showAllArticles
                    ? hotArticles
                    : hotArticles.slice(0, 3)"
                  :key="index"
                >
                  <p>{{ article.title }}</p>
                  <p style="color: green; margin-left: 10px">
                    {{ article.date }}
                  </p>
                </li>
              </ul>
            </el-skeleton>
            <el-button
              v-if="showAllCourses"
              type="text"
              @click="showAllCourses = false"
              >关闭</el-button
            >
          </div>
        </el-col>

        <el-col :span="8" class="hidden-xs-only">
          <div class="section">
            <h3>热门商品</h3>
            <el-link
              type="info"
              style="float: right"
              @click="showAllProducts = true"
              >查看更多</el-link
            >
            <el-skeleton style="width: 240px" :loading="loading" animated>
              <template #template>
                <el-skeleton-item
                  variant="image"
                  style="width: 240px; height: 240px"
                />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 50%" />
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                      margin-top: 16px;
                      height: 16px;
                    "
                  >
                    <el-skeleton-item
                      variant="text"
                      style="margin-right: 16px"
                    />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
              <template #default>
                <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
                  <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image"
                  />
                  <div style="padding: 14px">
                    <span>Delicious hamburger</span>
                    <div class="bottom card-header">
                      <div class="time">{{ currentDate }}</div>
                      <el-button text class="button"
                        >Operation button</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </template>
            </el-skeleton>
            <el-button
              v-if="showAllProducts"
              type="text"
              @click="showAllProducts = false"
              >关闭</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style scoped></style>
